class Chat {
    messageList = 'messages-list'; chatList = 'list';

    initChatList()
    {
        var listObj = new ChatList();
        var listHtml = listObj.initList(listData);
        list = document.getElementById(this.chatList);
        document.getElementById(this.chatList).innerHTML = listHtml;
    }

    initChatMessage()
    {

        var messageObj = new ChatMessage(1);
        var messageHtml = messageObj.init(messageData);
        document.getElementById(this.messageList).innerHTML = messageHtml;
    }
}

// 聊天信息
class ChatMessage {
    chat_user_id = '';
    constructor(chat_user_id) {
        this.chat_user_id =  chat_user_id;
    }

    init(data)
    {
        var html = '';
        that = this;
        html += that.msMore();
        data.forEach(function (e) {
            if (e.chat_user_id === that.chat_user_id) {
                html += that.messageIsMe(e);
            } else  {
                html += that.messageNotMe(e);
            }
        })

        return html;
    }

    append(data)
    {
        var html = '';
        that = this;
        var times = $('.msg-time');
        if (times.length < 1) {
            var last_min = data[0].created_at - 5 * 60;
        } else {
            console.log($(times[times.length - 1]).attr('date-time'));
            var last_min = $(times[times.length - 1]).attr('date-time');
        }
        data.forEach(function (e) {
            // 判断这个聊天框的最后一条消息的时间-现在收到消息的时间差 > 5 min?
            console.log(e.created_at - last_min);
            if ((e.created_at - last_min) >= 5 * 60) {
                html += that.msTime(e.created_at);
            }
            if (e.chat_user_id == that.chat_user_id) {
                html += that.messageIsMe(e);
            } else  {
                html += that.messageNotMe(e);
            }
        })
        return html;
    }

    msMore()
    {
        var html = '';
        html += '<div class="msg-more">';
        html +=   '<span class="load-more" style="display: none;">';
        html +=   '<span class="icon"></span>查看和他的历史私信消息</span>';
        html +=   '<span class="no-more" style="">没有更多消息了～</span>';
        html +=   '<span class="loading" style="display: none;">';
        html +=   '<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></span>';
        html +=   '<span class="error" style="display: none;">消息加载失败，<span class="btn">点击重新加载</span>';
        html +=   '</span>';
        html += '</div>';

        return html;
    }

    msTime(data)
    {
        var d = new Date(data*1000);
        var html = '';
        html += '<div class="msg-time" date-time="'+data+'">';
        html += '   <span  class="time">'+d.getFullYear()+'年'+d.getMonth()+'月'+d.getDate()+'日'+ d.getHours()+':'+d.getMinutes()+'</span>';
        html += '</div>';
        return html;
    }

    messageIsMe(data)
    {
        var html = '';
        html +=   '<div class="msg-item is-me"><a href="" target="_blank" class="avatar" title="'+data.nickname+'" style="background-image:url('+data.avatar+');"></a>';
        html +=   '<div class="message">';
        html +=   '<div id="is-me" class="message-content is-me not-img">'+data.content+'</div>';
        html +=   '</div>';
        html +=   '</div>';
        return html;
    }

    messageIsMeSendFailed(data)
    {
        var html = '';
        html +=   '<div class="msg-item is-me"><a href="" target="_blank" class="avatar" title="'+data.nickname+'" style="background-image:url('+data.avatar+');"></a>';
        html +=   '<i class="fa fa-exclamation" aria-hidden="true"></i>';
        html +=   '<div class="message">';
        html +=   '<div id="is-me" class="message-content is-me not-img">'+data.content+'</div>';
        html +=   '</div>';
        html +=   '</div>';
        return html;
    }

    messageNotMe(data)
    {
        var html = '';
        html += '<div class="msg-item not-me"><a href="" target="_blank" class="avatar" title="'+data.nickname+'" style="background-image: url('+data.avatar+')"></a>';
        html += '<div class="message">';
        html += '<div id="is-me" class="message-content not-me not-img">'+data.content+'</div>';
        html += '</div>';
        html += '</div>';
        return html;
    }
}

// 好友列表
class ChatList {

    constructor(chat_user_id) {
        this.chat_user_id = chat_user_id;
    }

    initList(data) {
        // **  从本地 strage 读取激活了哪一个好友窗口
        var active_index = localStorage.getItem('active_index');
        if (active_index === undefined && data.length > 0) {
            active_index = data[0].id;
        }
        var html = '';
        data.forEach(function (e) {
                html +='<div class="list-item'+((active_index !== undefined && e.id === (active_index*1))?" active":"")+'" data-group-id='+e.id+'>';
                html +='<div class="close">';
                html +='<svg data-v-42a3b689="" viewBox="0 0 40 40" class="css-1dtzbno">';
                html +='<path d="M22.83,20,38.42,4.41a2,2,0,1,0-2.83-2.83h0L20,17.17,4.41,1.58A2,2,0,0,0,1.58,4.41L17.17,20,1.58,35.59a2,2,0,0,0,2.83,2.83L20,22.83,35.59,38.42a2,2,0,1,0,2.83-2.83Z"></path>';
                html +='</svg>';
                html +='</div>';
                html +='<div class="avatar-container">';
                html +='<div class="avatar" title="' + e.nickname + '" style="background-image:url('+e.avatar+');"></div>';
                html +='</div>';
                html +='<div class="name-container">';
                html +='<div class="name">' + e.nickname + '</div>';

            if (e.last === undefined || e.last === null || e.last.length === 0) {
                html +='<div class="last-message"></div>';
            } else {
                if (e.last.type == '2') {
                    html +='<div class="last-message">图片</div>';
                } else {
                    html +='<div class="last-message">' + e.last.content + '</div>';
                }
            }
            html +='</div>';
            // html +='<div class="red-dot-notify"></div>';
            html +='</div>';
        });

        return html;
    }
}

module.exports = {
    ChatList,
    Chat,
    ChatMessage
};